<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>登录页面</title>
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/assets/css/animate.css" rel="stylesheet">
    <link href="/assets/css/style.min.css" rel="stylesheet">

    <style>
        .lyear-wrapper {
            position: relative;
        }

        .lyear-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important;
        }

        .login-center {
            background: #fff;
            min-width: 38.25rem;
            padding: 2.14286em 3.57143em;
            border-radius: 5px;
            margin: 2.85714em 0;
        }

        .login-header {
            margin-bottom: 1.5rem !important;
        }

        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
        }

        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }

        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }
        body.login-content {
            text-align: center
        }

        body.login-content:after {
            content: "";
            vertical-align: middle;
            display: inline-block;
            width: 1px;
        }

        body.login-content:before {
            height: 50%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #00bcd4;
            content: "";
            z-index: 0
        }
    </style>
</head>

<body class="login-content">
<div class="row lyear-wrapper">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <img alt="light year admin" src="/assets/images/logo-sidebar.png">
            </div>
            <div>
                <div class="form-group has-feedback feedback-left">
                    <input name="username" id="username" type="text" value="123456" placeholder="请输入您的用户名" class="form-control">
                    <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input id="password" name="password" type="password" value="123456" placeholder="请输入密码" class="form-control">
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                </div>
                <div class="card-body">
                    <div class="example-box">
                        <label class="lyear-radio radio-inline radio-primary">
                            <input type="radio" name="roles" value="0"><span>教师</span>
                        </label>
                        <label class="lyear-radio radio-inline radio-primary">
                            <input type="radio" checked="checked" name="roles" value="1"><span>管理员</span>
                        </label>
                        <label class="lyear-radio radio-inline radio-primary">
                            <input type="radio" name="roles" value="2"><span>学生</span>
                        </label>
                    </div>

                </div>
                <div class="form-group">
                    <button class="btn btn-block btn-primary" type="button" onclick="submit()">立即登录</button>
                </div>
            </div>
            <hr>
            <footer class="col-sm-12 text-center">
                <p class="copyright">Copyright &copy; 2020 美丽女神</p>
            </footer>
        </div>
    </div>
</div>

<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
<!-- jquery cookie -->
<script src="/assets/js/jquery.cookie.min.js"></script>
<!--消息提示-->
<script src="/assets/js/bootstrap-notify.min.js"></script>
<script src="/assets/js/lightyear.js"></script>
<script>

    // 登录点击事件
    function submit() {
        console.log("用户名：" + $("#username").val())
        if ($("#username").val() === "") {
            lightyear.notify('请先输入账号~', 'warning', 300);
            return false;
        }

        console.log("密码：" + $("#password").val())
        if ($("#password").val().length < 6) {
            lightyear.notify('密码长度不正确~', 'warning', 100);
            return false;
        }

        console.log("角色：" + $("input:radio[name='roles']:checked").val())
        if ($("input:radio[name='roles']:checked").val() === "") {
            return false;
        }

        console.log("开始登录")
        login($("#username").val(), $("#password").val(), $("input:radio[name='roles']:checked").val());
    }

    // 提交登录
    function login(username, password, roles) {
        lightyear.loading('show');
        $.ajax({
            type: "POST",
            url: "/Signin",
            dataType: "json",
            data: {
                "username": username,
                "password": password,
                "roles": roles
            }, success: function (data, status) {
                console.log(data)
                lightyear.loading('hide');
                if (status === "success") {
                    if (data.code === 200) {
                        $.cookie("userInfo", data.data.userInfo);
                        console.log($.cookie("userInfo"))
                        lightyear.notify('登录成功，页面即将自动跳转~', 'success', 300);
                        // 后端给界面地址
                        location.href = data.data.href;
                    } else
                        lightyear.notify('登录失败，请检查账号或者密码后再试~', 'danger', 300);
                }
            }, error: function (xhr, errorText, errorType) {
                lightyear.loading('hide');
                lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
            }
        })
    }
</script>
</body>
</html>